<template>
    <div class="gitPlus">
        <div class="bg" v-if="base.isEnterLoad"></div>
        <span :class="[{ active: isPlug || selectedPlug.length > 0 }, 'btnPlug show flexC']" @click.stop="isPlug ? '' : getPlug()">
            {{ selectedPlug.length == 0 ? '选择插件' : '已选择插件' }}
            <!-- {{selectedPlug}} -->
            <el-popover
                v-for="item in selectedPlug"
                placement="top"
                :visible="item.id == popoverid"
                width="290">
                <div class="plugCon nonposit" @click.stop >
                        <div class="plugConB" v-if="item.id == 1">
                            <span class="t1 show">智能询价</span>
                            <span class="t2 show">产品原材料及报价实时更新， 省去人工查询环节， 快速输出报价单，让生意畅通无阻。</span>
                            <div class="pleaseBox">
                                <p class="pleaseClass">
                                    <span class="pleaseCl">请选择分类 </span>
                                </p>
                                <el-select 
                                    :teleported="false"
                                    @click.stop
                                    v-model="selectClass" 
                                    filterable 
                                    placeholder="请选择报价分类">
                                    <el-option v-for="(ite,ind) in classData" :key="ite.id" :label="ite.title" :value="ite.id" />
                                </el-select>
                            </div>
                            <el-upload
                                    :disabled="selectClass?false:true"
                                    ref="upload"
                                    class="upload-demo"
                                    action="/api/Pdfapiindex/consultupload"
                                    :limit="1"
                                    name="file"
                                    :show-file-list="false"
                                    :data="{
                                        userid:useStore.userIds,
                                        sessionid:base.inSessionId
                                    }"
                                    :headers="{Token: useStore.token }"
                                    :auto-upload="true"
                                    :before-upload="checkFile"
                                    :on-success="fileSuccess"
                                >     
                                <div class="btnUpload flexC " :class="{disnone:!selectClass}">
                                  <span class="upA">上传文档</span>
                                </div>
								
                            </el-upload>
							<div class="wenjianlx">
								 文件类型:{{extarr.join('、')}}。(文件大小小于50MB!); 
							</div>
                        </div>
                        <div class="plugConB" v-if="item.id == 2">
                            <span class="t1 show">计算器</span>
                            <span class="t2 show">丝网数据详情烦杂计算难，重量提前知，输入相关参数快速计算。</span>
                            <div class="pleaseBox">
                                <el-button @click="onSendCalculator" type="primary">立即使用</el-button>
                            </div>
                        </div>
                        <div class="plugConB" v-if="item.id == 3">
                            <span class="t1 show">图纸上传</span>
                            <span class="t2 show">帮助企业快速解读和提取图纸内容</span>
                            <div class="pleaseBox">
                                <p class="pleaseClass">
                                    <span class="pleaseCl">请选择分类</span>
                                </p>
                                <el-select 
                                    :teleported="false"
                                    @click.stop
                                    v-model="selectClass" 
                                    filterable 
                                    placeholder="请选择报价分类">
                                    <el-option v-for="(ite,ind) in classData" :key="ite.id" :label="ite.title" :value="ite.id" />
                                </el-select>
                            </div>
                            <el-upload
                                    :disabled="selectClass?false:true"
                                    ref="upload"
                                    class="upload-demo"
                                    action="/api/apiindex/drawingfileupload"
                                    :limit="1"
                                    name="file"
                                    :show-file-list="false"
                                    :headers="{Token: useStore.token }"
                                    :auto-upload="true"
                                    :before-upload="checkImgFile"
                                    :on-success="fileImgSuccess"
                                >     
                                <div class="btnUpload flexC " :class="{disnone:!selectClass}">
                                  <span class="upA">图纸上传</span>
                                </div>
								
                            </el-upload>
							<div class="wenjianlx">
								图纸类型:{{extarr.join('、')}}。(图纸文件大小小于100MB!); 
							</div>
                        </div>
                    </div>
                <template #reference>
                    <img class="icon" @click.stop="changPopverid(item)"  :src="`${imgurl}${item.img}`" />
                </template>
            </el-popover>


            <i class="add" v-if="!isPlug && selectedPlug.length == 0"></i>
            <i class="close" v-else @click.stop="removePlug"></i>
        </span>
        <div class="plugList" v-show="isPlug">
            <ul class="plugUl">
                <li :class="[{ active: item.check }]"  v-for="(item,index) in plugList" :key="item.id">
                    <div class="plugClick" @click.stop="openPlug(item.id)">
                        <img class="plugIcon" :src="`${imgurl}${item.img}`" alt="">
                        <span class="title show">{{ item.title }}</span>
                        <span class="check show" @click.stop="checkPlug(item.id)"></span>
                    </div>
                    <div class="plugCon" @click.stop v-if="item.id == selectChildItem">
                        <div class="plugConB" v-if="item.id == 1">
                            <span class="t1 show">智能询价</span>
                            <span class="t2 show">产品原材料及报价实时更新， 省去人工查询环节， 快速输出报价单，让生意畅通无阻。</span>
                            <div class="pleaseBox">
                                <p class="pleaseClass">
                                    <span class="pleaseCl">请选择分类</span>
                                </p>
                                <el-select 
                                    :teleported="false"
                                    @click.stop
                                    v-model="selectClass" 
                                    filterable 
                                    placeholder="请选择报价分类">
                                    <el-option v-for="(ite,ind) in classData" :key="ite.id" :label="ite.title" :value="ite.id" />
                                </el-select>
                            </div>
                            <el-upload
                                    :disabled="selectClass?false:true"
                                    ref="upload"
                                    class="upload-demo"
                                    action="/api/Pdfapiindex/consultupload"
                                    :limit="1"
                                    name="file"
                                    :show-file-list="false"
                                    :data="{
                                        userid:useStore.userIds,
                                        sessionid:base.inSessionId
                                    }"
                                    :headers="{Token: useStore.token }"
                                    :auto-upload="true"
                                    :before-upload="checkFile"
                                    :on-success="fileSuccess"
                                >     
                                <div class="btnUpload flexC " :class="{disnone:!selectClass}">
                                  <span class="upA"> 上传文档</span>
                                </div>
								
                            </el-upload>
							<div class="wenjianlx">
								文件类型:{{extarr.join('、')}}。(文件大小小于50MB!); 
							</div>
                        </div>
                        <div class="plugConB" v-if="item.id == 2">
                            <span class="t1 show">计算器</span>
                            <span class="t2 show">丝网数据详情烦杂计算难，重量提前知，输入相关参数快速计算。</span>
                            <div class="pleaseBox">
                                <div class="btnUpload flexC " @click="onSendCalculator(item.id)">
                                  <span class="jsA">立即使用</span>
                                </div>
                            </div>
                        </div>
                        <div class="plugConB" v-if="item.id == 3">
                            <span class="t1 show">图纸上传</span>
                            <span class="t2 show">帮助企业快速解读和提取图纸内容</span>
                            <div class="pleaseBox">
                                <p class="pleaseClass">
                                    <span class="pleaseCl">请选择分类</span>
                                </p>
                                <el-select 
                                    :teleported="false"
                                    @click.stop
                                    v-model="selectClass" 
                                    filterable 
                                    placeholder="请选择报价分类">
                                    <el-option v-for="(ite,ind) in classData" :key="ite.id" :label="ite.title" :value="ite.id" />
                                </el-select>
                            </div>
                            <el-upload
                                    :disabled="selectClass?false:true"
                                    ref="upload"
                                    class="upload-demo"
                                    action="/api/apiindex/drawingfileupload"
                                    :limit="1"
                                    name="file"
                                    :show-file-list="false"
                                    :headers="{Token: useStore.token }"
                                    :auto-upload="true"
                                    :before-upload="checkImgFile"
                                    :on-success="fileImgSuccess"
                                >     
                                <div class="btnUpload flexC " :class="{disnone:!selectClass}">
                                  <span class="upA">图纸上传</span>
                                </div>
								
                            </el-upload>
							<div class="wenjianlx">
								图纸类型:{{extarr.join('、')}}。(图纸文件大小小于100MB!); 
							</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { logo } from '@/utils/base.ts';
import { useSystemStore } from "@/store/modules/system";
import { useUserStore } from "@/store/modules/user";
import popconFirm from './popconFirm.vue';
const base = useSystemStore();
const useStore = useUserStore();
const api = inject('$base', null as any);
const $_ = inject('$_', null as any);
const imgurl = import.meta.env.VITE_APP_TITLE + '/assets/images/';
const emit = defineEmits(['onSuccessPlugins','onSendCalculator']);
const props = defineProps({
    classData: {
        type: Array,
        default: [],
     },
});
const selectedPlug = ref<any>([]);//选择的插件
const isPlug = ref<boolean>(false); //是否选择插件了
const plugList = ref<any>([
    { 'id': 1, 'title': '智能询价',isOpen:false, img:"pl01.png"},
    { 'id': 2, 'title': '计算器',isOpen:false ,img:"pl02.png"},
    { 'id': 3, 'title': '图纸上传',isOpen:false ,img:"pl03.png"},
])
const files = ref<string>('');
const fileName = ref<string>();
const selectClass = ref<any>();

const selectChildItem = ref<any>();
const popoverid = ref<any>();

let extarr = ['docx','doc','pdf','xls','xlsx','ppt','pptx'];
// 选择插件
function checkFile(file){
    var fileSize = file.size / 1024 / 1024 < 50;
    const index = file.name.lastIndexOf(".");
    const ext = file.name.substr(index + 1).toLowerCase();
    if (extarr.indexOf(ext) == -1) {
        ElMessage({
            message: '请上传正确的文件格式。',
            type: 'error',
        })
        return false;
    }
    if (!fileSize) {
        ElMessage({
            message: '文件大小不能超过50MB',
            type: 'error',
        })
        return false;
    }
 
    if(base.sessionType == 2){
        base.inSessionId = 0;
    }
    console.log( base.inSessionId,'0000000000',base.sessionType)
    nextTick(() => {
        console.log('DOM 已更新');
        var newData = {
            fileName:file.name,
            data:"", //携带参数信息
            classid:selectClass.value, //选择的分类名
            type:0, //状态
            isType:1  //类型
        }
        emit('onSuccessPlugins',newData);
        closeAllPlug();
    });
    
}
function fileSuccess(response,file,filelist){
    console.log(response,file,filelist); 
    var newData = {
        fileName:file.name,
        data:response.data,//携带参数信息
        classid:selectClass.value,//选择的分类名
        type:1, //状态
        isType:1   //类型
    }
    emit('onSuccessPlugins',newData)
}
function onSendCalculator(id:number){
    selectedPlug.value = [];
    plugList.value.forEach(item=>{
        if(item.id == id){
            item.check = true;
        }
        if(item.check){
            selectedPlug.value.push(item);
        }
    })
    emit('onSendCalculator',"")
    closeAllPlug();
}

/**
 * 关闭插件
 */
function closeAllPlug(){
    isPlug.value = false;
    selectChildItem.value = "";
    // selectClass.value = ""
    closePopverid();
}
/**
 * 打开插件
 */
 function getPlug() {
    isPlug.value = !isPlug.value;
    selectClass.value = ""
    selectChildItem.value = "";
    closePopverid();
}
/*
/**
 * 选择插件
 */
function checkPlug(id:number){
    selectedPlug.value = [];
    plugList.value.forEach(item=>{
        if(item.id == id){
            item.check = !item.check;
        }
        if(item.check){
            selectedPlug.value.push(item);
        }
    })
}
/**
 * 关闭插件
 */
function closePlug(){
    isPlug.value = false;
    selectClass.value = ""
    selectChildItem.value = "";
}
function removePlug(){
    console.log('关闭')
    isPlug.value = false;
    plugList.value.forEach(item=>{
        item.check = false;
    })
    selectedPlug.value = [];
    base.sessionType = 0;
    base.isNewSess = true;

}
//打开插件
function openPlug(id:number){
    selectChildItem.value = id;
}
function closePopverid(){
    popoverid.value = ""
}
function changPopverid(item){
    console.log(item.id)
    popoverid.value = item.id;
    closePlug();
}
function checkImgFile(file){
    console.log('111111111999999999999')

    var fileSize = file.size / 1024 / 1024 < 100;
    const index = file.name.lastIndexOf(".");
    const ext = file.name.substr(index + 1).toLowerCase();
    if (extarr.indexOf(ext) == -1) {
        ElMessage({
            message: '请上传正确的文件格式。',
            type: 'error',
        })
        return false;
    }
    if (!fileSize) {
        ElMessage({
            message: '文件大小不能超过100MB',
            type: 'error',
        })
        return false;
    }

}
const drawingfile = ref<string>();
const drawingfilename = ref<string>();
function fileImgSuccess(response,file,filelist){
    console.log(response,file,filelist); 
    drawingfile.value = response.data.imgurl;
    drawingfilename.value = response.data.name;
    onSendDrawing();
   
}
function onSendDrawing(){
    let data = {
        userid : useStore.userIds,
        drawingfile : drawingfile.value,
        classid : selectClass.value,
        filename : drawingfilename.value
    }
    api.drawingfeedback(data).then(res=>{
        ElMessage({
            message: '图纸上传成功，等待后台审核',
            type: 'success',
        })
        
        closePlug();
        closeAllPlug();
    })
}
onMounted(() => {
    window.addEventListener('click', (e) => {
        e.stopPropagation();
        closePlug();
        closePopverid();
    });
})

</script>

<style lang="scss" scoped>
.gitPlus {
    width: 100%;
    height: 36px;
    position: absolute;
    top: -40px;
    left: 0;
    .bg{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:999;
    }
}

.btnPlug {
    background: #fcfdfe;
    width: auto;
    height: 36px;
    position: absolute;
    left: 0;
    top: 0;
    color: #64b4fe;
    font-size: 13px;
    line-height: 25px;
    padding: 0 10px;
    cursor: pointer;
    z-index: 20;
    transition: all .5s;
    border-radius: 5px;

    .add,
    .close {
        width: 12px;
        height: 12px;
        display: inline-block;
        margin-left: 5px;
        transition: all .2s;
    }

    .add {
        background: url(../../assets/images/add.png) no-repeat;
        background-size: 100%;
    }

    .close {
        background: url(../../assets/images/close.png) no-repeat;
        background-size: 100%;
    }

    .icon {
        height: 12px;
        width: auto;
        margin-left: 5px;
    }

    &:hover,
    &.active {
        background: #4b90f6;
        color: #fff;
        .add {
            background: url(../../assets/images/add02.png) no-repeat;
            background-size: 100%;
        }
    }
}


.plugList {
    position: absolute;
    left: 0;
    bottom: 42px;
    border: solid 1px #e0edf9;
    background: #ffffff;
    width: 250px;
    border-radius: 10px;
    // overflow:hidden;
    z-index: 20;
    box-shadow: 0 3px 7px rgba(166, 182, 229, .2);

    .plug_top {
        background: #eff7ff;
        line-height: 28px;
        width: 100%;
        padding: 0 18px;
        font-size: 12px;
        color: #666666;
    }

    .num {
        color: #2379f7;
    }

    .plugUl {
        width: 100%;
        font-size: 14px;
        padding: 2px 0;

        li {
            position: relative;

            .plugClick {
                // background:url(../../assets/images/plug.png) no-repeat 10px center;
                // background-size:26px 25px;
                padding: 0 20px 0 20px;
                line-height: 36px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color: #666666;

                cursor: pointer;

                .plugIcon {
                    width: 18px;
                    height: 18px;
                    display: block;
                    object-fit: contain;
                    margin-right: 5px;
                }

                .title {
                    width: 0;
                    flex: 1;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 14px;
                }
            }

            &:hover {
                background: #ecf8fb;
                .title {
                    color: #2379f7;
                  
                }
                .plugCon {
                    display: block;
                }
            }

            &.active {
                color: #2379f7;

                .check {
                    background: #66e6b1;
                    border: solid 1px #66e6b1;
                }
            }
        }

        .check {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: solid 1px #ccdbec;
        }
    }
}

            .plugCon{
				position:absolute;
				bottom:0;
				left:100%;
				// display: none;
				padding-left: 5px;
               
				.plugConB{
					background:#fff;
					box-shadow:0 3px 7px rgba(166,182,229,.2);
					padding:8px 10px;
					border-radius:5px;
					width:255px;
				}
				.t1{
					color:#2379f7;
					font-size:16px;
					line-height:30px;
				}
				.t2{
					font-size:13px;
					color:#5f7298;
					line-height:18px;
				}
				.btnUpload{
					background-image: linear-gradient(90deg, #0ac1ba, #2379ff);
					width:98px;
					height:32px;
					border-radius:5px;
					margin:10px 0;
                    cursor:pointer;
					.upA{
						background:url(../../assets/images/icon_add.png) no-repeat left center;
						background-size:8px 12px;
						color:#fff;
						padding-left:12px;
					}
                    .jsA{
						background:url(../../assets/miscel/js.png) no-repeat left center;
						background-size:12px 12px;
						color:#fff;
						padding-left:16px;
					}
				}
				.sample{
					border-top:solid 2px #f1f3f8; 
					font-size:13px;
					margin:0;
					dt{
						line-height:26px;
						color:#5f7298;
					}
					dd{
						margin:0;
						display:flex;
						justify-content:left;
						align-items:center;
						.con{
							background:#f1f5fb;
							border:solid 1px #e4f1ff;
							width:auto;
							height:25px;
							margin:0 0 5px 0;
							line-height:25px;
							border-radius:5px;
							padding:0 5px;
							img{
								float:left;
							}
						}
					}
				}
                &.nonposit{
                    position: relative;
                    left: 0;
                    .plugConB{
                        padding: 0;
                        box-shadow: none;
                    }
                }
			}
            .disnone{
                opacity: 0.8;
                filter: grayscale(1);
            }

            .pleaseBox{
                margin-top: 10px;
            }
            .pleaseClass{
                margin: 0 0 8px;
                padding: unset;
                .pleaseCl{
                    font-size: 14px;
                    color: #333;
                }
            }
    @media screen and (max-width: 768px) {
        .plugList{
            width:160px;
            .plugConB{
                width:225px;
            }
        }
        
    }
	
	.wenjianlx{
		font-size: 12px;
		color: #666;
	}
    
</style>
